<template>
  <div v-if="filmInfo">
    <detail-header v-scroll="15">
      {{ filmInfo.name }}
    </detail-header>
    <div
      :style="{
        backgroundImage: 'url(' + filmInfo.poster + ')'
      }"
      class="poster"
    ></div>
    <div class="content">
      <div>
        {{ filmInfo.name }}
      </div>
      <div>
        <div class="content-text">
          {{ filmInfo.category }}
        </div>
        <div class="content-text">
          {{ filmInfo.premiereAt | datafilter }}上映
        </div>
        <div class="content-text">
          {{ filmInfo.nation }} | {{ filmInfo.runtime }}分钟
        </div>
        <div
          class="content-text"
          style="line-height: 15px"
          :class="isHidden ? 'hidden' : ''"
        >
          {{ filmInfo.synopsis }}
        </div>
        <div style="text-align: center">
          <i
            class="iconfont"
            @click="hanghidden"
            :class="isHidden ? 'icon-moreunfold' : 'icon-less'"
          ></i>
        </div>
      </div>
      <!-- 演职人员 -->
      <div>
        <div>演职人员</div>
        <detail-swiper :PerView="3.5" name="acrors">
          <detail-swiper-item
            v-for="(data, index) in filmInfo.actors"
            :key="index"
          >
            <div class="avatar"><img :src="data.avatarAddress" alt="" /></div>
            <div style="text-align: center; font-size: 12px">
              {{ data.name }}
            </div>
            <div style="text-align: center; font-size: 13px">
              {{ data.role }}
            </div>
          </detail-swiper-item>
        </detail-swiper>
      </div>
      <!-- 剧照 -->
      <div>
        <div>剧照</div>
        <detail-swiper :PerView="2" name="photos">
          <detail-swiper-item
            v-for="(data, index) in filmInfo.photos"
            :key="index"
          >
            <div class="photos" @click="hangdlePreviewS(index)">
              <img :src="data" alt="" />
            </div>
          </detail-swiper-item>
        </detail-swiper>
      </div>
    </div>
  </div>
</template>
<script>
import http from '@/util/httpAxios'
import moment from 'moment'
import Vue from 'vue'
import detailSwiper from '@/components/Detail/DetailSwiper.vue'
import detailSwiperItem from '@/components/Detail/DetailSwiperItime.vue'
import detailHeader from '@/components/Detail/DetailHeader.vue'
import { ImagePreview } from 'vant'
moment.locale('zh-cn') // 设置中文 moment
console.log()
Vue.filter('datafilter', (data) => {
  return moment(data * 1000).format('YYYY-MM-DD')
})
Vue.directive('scroll', {
  inserted(el, binding) {
    el.style.display = 'none'
    window.onscroll = () => {
      console.log(scroll)
      if (
        (document.documentElement.scrollTop || document.body.scrollTop) >
        binding.value
      ) {
        el.style.display = 'block'
      } else {
        el.style.display = 'none'
      }
    }
  },
  //   销毁执行的生命周期
  unbind() {
    window.onscroll = null
  }
})
export default {
  created() {
    console.log('created', this.$route.params.myid)
  },
  data() {
    return {
      filmInfo: null,
      isHidden: true
    }
  },
  components: {
    detailSwiper,
    detailSwiperItem,
    detailHeader
  },
  mounted() {
    http({
      url: `/gateway?filmId=${this.$route.params.myid}&k=9447117`,
      headers: {
        'X-Client-Info':
          '{"a":"3000","ch":"1002","v":"5.2.1","e":"16750839444888411517222913","bc":"340800"}',
        'X-Host': 'mall.film-ticket.film.info'
      }
    }).then((res) => {
      console.log(res.data.data.film)
      this.filmInfo = res.data.data.film
    })
  },
  methods: {
    hangdlePreviewS(index) {
      ImagePreview({
        images: this.filmInfo.photos,
        startPosition: index,
        closeable: true,
        closeIconPosition: 'top-left'
      })
    },
    hanghidden() {
      this.isHidden = !this.isHidden
      console.log(this.isHidden)
    }
  }
}
</script>
<style lang="scss" scoped>
.poster {
  width: 100%;
  height: 13.125rem;
  background-size: 100%;
}
.content {
  padding: 0.9375rem;
  background-color: white;
  .content-text {
    color: #797d82;
    font-size: 13px;
    margin-top: 0.25rem;
  }
  .avatar {
    img {
      width: 5.3125rem;
      height: 5.3125rem;
    }
  }
  .photos {
    img {
      width: 100%;
    }
  }
}
.hidden {
  overflow: hidden;
  height: 30px;
}
</style>
>
